<template>
    <div class="min-h-screen bg-gradient-to-br from-blue-100 to-purple-50 flex items-center justify-center p-4">
        <div
            class="max-w-2xl w-full bg-white rounded-2xl shadow-lg p-8 space-y-6 transform transition-all hover:shadow-xl">
            <!-- 头部标题 -->
            <div class="text-center space-y-2">
                <h1
                    class="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                    高考冲刺加油站
                </h1>
                <p class="text-gray-600 text-lg">乾坤未定，你我皆是黑马！</p>
            </div>

            <!-- 倒计时 -->
            <div class="bg-blue-50 p-4 rounded-xl text-center">
                <div class="text-2xl font-semibold text-blue-800">
                    距离高考还有
                    <span class="text-3xl animate-pulse">{{ daysRemaining }}</span>
                    天
                </div>
                <div class="text-gray-600 mt-2">此刻的付出，终将点亮未来的路</div>
            </div>

            <!-- 励志语句轮播 -->
            <div class="relative h-32 overflow-hidden rounded-lg bg-purple-50 p-4">
                <transition name="fade" mode="out-in">
                    <div :key="currentQuoteIndex" class="text-center absolute inset-0 flex items-center justify-center">
                        <p class="text-xl italic text-gray-800 px-4">"{{ quotes[currentQuoteIndex] }}"</p>
                    </div>
                </transition>
            </div>

            <!-- 进度条 -->
            <div class="space-y-2">
                <div class="h-3 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-full transition-all duration-500"
                        :style="{ width: progress + '%' }"></div>
                </div>
                <div class="flex justify-between text-sm text-gray-600">
                    <span>已坚持 {{ passedDays }} 天</span>
                    <span>剩余 {{ daysRemaining }} 天</span>
                </div>
            </div>

            <!-- 鼓励按钮 -->
            <button @click="encourage" class="w-full py-3 bg-gradient-to-r from-green-400 to-blue-500 text-white rounded-lg font-semibold 
               hover:from-green-500 hover:to-blue-600 transition-all transform hover:scale-105">
                🎯 点击领取今日能量
            </button>
        </div>
    </div>

    <music />
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import music from './music.vue'
// 高考日期设置（示例设为2024-06-07）
const gaokaoDate = new Date(2025, 5, 7)
const today = ref(new Date())

const quotes = ref([
    '答错的每一道题都是为了遇见对的人，答对的每一道题都是为了遇见更好的自己',
    '鹏北海，凤朝阳，又携书剑路茫茫。明年此日青云去，却笑人间举子忙',
    '没有尽力而为，只有全力以赴',
    '你披星戴月走过的路，终将繁花满地'
])

const currentQuoteIndex = ref(0)
const progress = ref(0)

// 计算天数差
const timeDiff = computed(() => gaokaoDate.getTime() - today.value.getTime())
const daysRemaining = computed(() => Math.ceil(timeDiff.value / (1000 * 3600 * 24)))
const passedDays = computed(() => 365 - daysRemaining.value)

// 自动轮播励志语句
onMounted(() => {
    setInterval(() => {
        currentQuoteIndex.value = (currentQuoteIndex.value + 1) % quotes.value.length
    }, 5000)

    // 更新进度
    progress.value = ((passedDays.value / 365) * 100).toFixed(1)
})

// 每天更新日期
setInterval(() => {
    today.value = new Date()
}, 86400000)

const encourage = () => {
    const encouragements = ['你一定行！', '继续加油！', '坚持就是胜利！', '你是最棒的！']
    alert(encouragements[Math.floor(Math.random() * encouragements.length)])
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>